<script setup>
	import NoresultRemind from '/src/components/noresult-remind.vue'
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// 列表数据
	const list = reactive({
		listData: [],
	})
	let mainData = ref([])
	const option = ref(0)
	const search = ref('')

	function getCate() {
		uni.request({
			url: "https://tp6.recer.starsky.fun//api/Home/Index/serach",
			method: "POST",
			header: {
				'content-type': 'application/json; charset=utf-8' //重点
			},
			success: (res) => {
        console.log(res)
				mainData.value = res.data.data.task_list;
			},
		})
	}
	const showMsg = computed(() => {
		let opt = {
			0: '推荐任务',
			1: '抖音探店',
			2: '快手探店',
			3: '小红书探店',
			4: '大众探店',
			5:'火山探店',
			6:'B站探店',
			7:'微博探店',
			8: `搜索 ${search.value}`,
			'-2': '种草素材'
		}
		// 回调函数必须return，结果就是计算的结果
		// 如果计算属性依赖的数据发生变化，那么会重新计算
		return opt[option.value]

	})
	list.listData = computed(() => {
		// 回调函数必须return，结果就是计算的结果
		// 如果计算属性依赖的数据发生变化，那么会重新计算
		let opt = {1: '抖音探店',2:'快手探店',3:'小红书探店',4:'大众探店',5:'火山探店',6:'B站探店',
			7:'微博探店','-2': '种草素材'}
		if (option.value == '-2') {
			return mainData.value.filter(item=>item.name =="抖音探店")
		} 
		if(opt[option.value]) {
			return mainData.value.filter(item => item.name == opt[option.value] )
		}
		return mainData.value.filter(item => item.title.includes(search.value))
	})
	uni.$on('update', function(data) {
		option.value = data.option
	})
	uni.$on('search', function(data) {
		search.value = data.search
		option.value = -1
	})
	uni.$on('goTandian', function() {
		option.value = -2
	})
	//定义探店标签颜色数组
	const labelColor = ref([
		'#faca2a', '#72bb72', '#fd6620'
	])
	const computedLabel = computed((index) => {
		return `color:labelColor[index]`
	})
	// 跳转到详情页
	function toDetail(item) {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${item.id}`
		})
	}
	onLoad(() => {
		getCate(),
			option.value = 0
	})
  function imgerror(e,img){
    list.listData.map((item)=>{
      item.taskuserimg="../../static/logo.png"
    })
  }
</script>

<template>
	<view class="list">
		<view class="list-title">
			<view class="title-left">{{showMsg}}</view>
			<view class="title-right">更多任务</view>
		</view>
		<view class="list-body">
			<block v-for="(item, index) in list.listData" :key="index">
				<view class="item" @click="toDetail(item)">
					<image :src="item.taskuserimg" class="item-img" @error="imgerror($event, index_img )" mode="scaleToFill" />
					<view class="item-right">
						<view class="right-hd">
							<view class="title">{{ item.title }}</view>
							<view class="price">{{ option=='-2'?(item.price.slice(0,item.price.length-1)/100).toFixed(2):item.price }}$</view>
						</view>
						<view class="right-bd">
							<block v-if="option !='-2'" v-for="(label,index) in [item.name, '参与' + item.apply_num, '名额' + item.max_num]">
								<view class="label">{{ label }}
								</view>
							</block>
              <block v-else v-for="(label,index) in ['等级Lv'+item.leftnum, '下载:' + item.apply_num, '图片:' + item.max_num]" >
								<view class="label" :style="{computedLabel}">{{ label }}
								</view>
							</block>
						</view>
					</view>
				</view>
			</block>
			<noresult-remind v-if='list.listData.length === 0' content='任务'></noresult-remind>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.list {
		margin-top: 20rpx;
		background-color: #fff;

		.list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;

			.title-left {
				font-size: 30rpx;
				font-weight: 600;
			}

			.title-right {
				font-size: 24rpx;
				color: #ccc;
			}
		}

		.list-body {
			padding: 0 20rpx;

			.item {
				display: flex;
				align-items: center;
				height: 160rpx;

				.item-img {
					width: 112rpx;
					height: 112rpx;
				}

				.item-right {
					flex: 1;
					height: 112rpx;
					margin-left: 16rpx;

					.right-hd {
						display: flex;
						justify-content: space-between;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 32rpx;
						color: #040404;

						.price {
							color: #fd6620;
							font-weight: 700;
						}
					}

					.right-bd {
						display: flex;
						font-size: 24rpx;
						color: #a1a1a1;

						.label {
							padding: 6.4rpx 16rpx;
							margin-right: 16rpx;
							background-color: #f8f8f8;
							border-radius: 15rpx;
						}
					}
				}
			}
		}
	}
</style>